<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是使用defineProperty 双向绑定
    <input type="text" placeholder="请输入" class="input">
    <h3 class="h3"></h3>

    <hr>
    Vue3使用proxy 双向绑定
    <input type="text" class="input2">
    <h3 class="h32"></h3>
    <script>

        // 使用defineProperty 双向绑定
        var inp = document.querySelector('.input');
        var h3 = document.querySelector('.h3');
        var obj = {};

        inp.oninput = function () {
            h3.innerText = this.value;
            obj.name = this.value;
        }

        Object.defineProperties(obj, {
            name: {
                configurable: true,
				enumerable: true,
                get() {
                    return inp.value
                },
                set(val) {
                    inp.value = val
                }
            }
        })

        // Vue3使用proxy 双向绑定
        var inp2 = document.querySelector('.input2');
        var h32 = document.querySelector('.h32');
        var obj2 = {
            name: inp2.value
        };

        inp2.oninput = function () {
            h32.innerText = this.value
        }

        var proxy = new Proxy(obj2, {
            get(target, sttr, self) {
                if (sttr in target) {
                    return inp2.value
                } else {
                    throw new Error('没有该属性')
                }
            },
            set(target, key, value, self) {
                target[key] = value;
                inp2.value = value;
            }
        })
    </script>
</body>
</html>